<style lang="scss">
#VUE{overflow:auto}
</style>
<style lang="scss" scoped>

.tab{
    padding:14px;
    border-bottom:1px solid #eee;
    a{
        margin:0 14px;
        color:#999;
        word-break: keep-all;
        float: left;
        &.now{
            color:#239F5F;
        }
    }
}
.li {
    flex-wrap:wrap;
    display:flex;
    flex-direction: row ;
}
.li .img{
    display:flex;
    width:202px;
    flex-flow: column;
    img{max-width:100%;}
    span{padding:7px;}
}
</style>

<template lang="pug">
.body
    .tab.C
        a(v-for="i,pos in menu" :class="{now:pos==menu_now}" @click="_menu(pos)") {{i}}
    .tab.C
        a(v-for="i,pos in kind[menu_now]" :class="{now:pos==kind_now}" @click="_kind(pos)" :title="i[1]") {{i[2]||i[1]}}

    .li(v-if="li")
        a.img(v-for="i in li" :href="'//m.shein.com/ar/--p-'+i[0]+'.html'" target="_blank")
            img(:src="i[2]" loading="lazy")
            span {{i[1]}}
    .I-loading(v-else)
</template>

<script lang="coffee">
#import Vue from 'vue'
#import {Scrollbar,Dialog} from 'element-ui'
#[Scrollbar,Dialog].forEach (e)-> Vue.use(e)
KIND = require '~json/kind.js'

export default {
data : ->
    menu = []
    kind = []
    for i in require('~json/kind.json')
        menu.push i.shift()
        kind.push i
    {
        menu
        kind
        menu_now:0
        kind_now:0
        li:0
    }


components:{
}

mounted:->
    @_kind(0)

methods:{
    _menu : (pos)->
        @menu_now = pos
        @_kind(0)

    _kind : (pos)->
        @kind_now = pos
        @li = 0
        kind = @kind[@menu_now][pos]
        @li = await KIND[kind[0]]
}
}
</script>

